<!-- 新碟组件 -->
<template>
  <div class="new_cd_item cursor_class">
    <div class="new_cd_item_top_img" @click="handleClickToAlbumDetail(id)" style="border-radius: 4px;overflow: hidden;">
      <!-- <img :src="picUrl" alt="" /> -->
      <el-image :src="picUrl" style="width: 100%; height: 100%" fit="cover" :lazy="isLazy"></el-image>
      <el-tooltip effect="dark" content="播放" placement="top-start">
        <span class="cd_play_icon">
          <el-icon @click.stop="handleClickPlay">
            <VideoPlay />
          </el-icon>
        </span>
      </el-tooltip>
    </div>
    <div class="new_cd_item_bottom_info">
      <div class="text_decoration text_ellipsis" @click="handleClickToAlbumDetail(id)">{{name}}</div>
      <span class="text_decoration text_muted" v-if="aitistName" v-for="(item,index) in artists">
        <span v-if="index !== 0" style="margin:0 4px">/</span>
        <span @click="handleClickToArtistDetail(item.id)">{{item.name}}</span>
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer
} from '@element-plus/icons-vue'
import { defineEmits, defineProps, ref, toRefs } from 'vue'
import { getAlbumDetail } from "@/api/album";
import { useStore } from "vuex";
const store = useStore();
const emit = defineEmits(['handleClickToAlbumDetail', 'handleClickToArtistDetail'])
const handleClickToAlbumDetail = (id: number) => {
  emit('handleClickToAlbumDetail', id)
}
const handleClickToArtistDetail = (id: number) => {
  emit('handleClickToArtistDetail', id)
}
const props = defineProps({
  //子组件接收父组件传递过来的值
  // 是否需要艺人 / 歌手 名称
  aitistName: {
    type: Boolean,
    default: true
  },
  // 图片
  picUrl: {
    type: String,
    default: ''
  },
  // 歌手信息
  artists: {
    type: Array as unknown as any[],
    default: () => [{}]
  },
  // 专辑名字
  name: {
    type: String,
    default: ''
  },
  // 是否需要图片懒加载 首页新碟上架swiper组件使用懒加载图片会出问题
  isLazy: {
    type: Boolean,
    default: true
  },
  // 专辑id
  id: {
    type: Number,
    default: 0
  }
})
const { id,aitistName } = toRefs(props)
const songs = ref<any[]>([{}])
const handleClickPlay = ()=>{
  getAlbumDetailData(id.value)
}
// 获取详情信息
const getAlbumDetailData = async (id: number | string | Array<string>) => {
  const res: any = await getAlbumDetail({ id })
  songs.value = res.songs
  let list = filterMusicData(songs.value)
  store.dispatch('playAll', { list });
}
// 把需要vip的过滤出去
const filterMusicData = (tracks:any[]): any[] => {
  let list = tracks.filter((item: any)=>{
    return item.fee != 1
  })
  return list
}
</script>
<style lang="scss" scoped>
.new_cd_item {
  font-size: 14px;

  .new_cd_item_top_img {
    // width: 100px;
    height: 150px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cd_play_icon {
      display: none;
      position: absolute;
      right: 10px;
      bottom: 4px;
      font-size: 28px;
      color: #fff;
    }

    &:hover {
      .cd_play_icon {
        display: block;
      }
    }
  }

  .new_cd_item_bottom_info {
    margin-top: 8px;

    &>div {
      margin-bottom: 4px;
    }
  }
}
</style>